<template>
  <div class="card">
    {{ source }}
    <br />
    <button @click="source++">监听source的值，打开控制台查看，仅监听三次</button>
  </div>
</template>

<script setup lang="ts">
import { watchAtMost } from '@vueuse/core';
import { ref, watch, unref } from 'vue';

const source = ref(0);
watchAtMost(
  source,
  () => {
    console.log('trigger!');
  }, // triggered it at most 3 times
  {
    count: 3,
  },
);

// function watchAtMost(source: any, cb: (...args: any) => any, count: any) {
//   let current = 0;
//   const stop = watch(source, (...args) => {
//     current++;
//     console.log(current, unref(count));
//     if (current >= unref(count)) {
//       stop();
//     }
//     cb(...args);
//   });
// }
</script>

<style scoped></style>
